<template>
	<view class="outbox">
		<!-- 旧密码修改密码 -->
		<view class="from" v-if="state.way">
			<view class="itemBox"><input type="password" v-model="state.oldPassword" placeholder="旧密码"></view>
			<view class="itemBox"><input type="password" v-model="state.newPassword" placeholder="新密码"></view>
			<view class="itemBox"><input type="password" v-model="state.reNewPassword" placeholder="再输入一遍新密码"></view>
			<view class="btn" @click="changePassword">
				确认修改
			</view>
		</view>
		<!-- 手机号验证新密码 -->
		<view class="from" v-if="state.way==false">
			<view class="itemBox"><input type="text" v-model="state.phone" placeholder="手机号"></view>
			<view class="itemBox">
				<input class="yzm" type="text" v-model="state.myYzm" placeholder="验证码">
				<view style="color:#79bbff;" @click="getYzm">
					{{state.yzTitle}}
				</view>
			</view>
			<view class="itemBox"><input type="text" v-model="state.phonePassword" placeholder="新密码"></view>
			<view class="btn" @click="changePassword">
				确认修改
			</view>
		</view>
		<!-- 消息提示 -->
		<u-toast ref="utoast"></u-toast>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive, ref
	} from "vue";
	const state = reactive({
		token:'',
		way: false,
		myPassword:'',
		oldPassword:'',
		newPassword:'',
		reNewPassword:'',
		phone:'',
		myYzm:'',
		yzm:'',
		phonePassword:'',
		yzTitle:'获取验证码'
	})
	const utoast = ref(null);
	// 生命周期函数
	onLoad((e) => {
		if (e.name == '通过手机验证码修改') {
			state.way = false
		} else {
			state.way = true
		}
		//获取token
		getToken()
	})
	// 获取token
	const getToken = ()=>{
		uni.getStorage({
			key:'Authorization',
			success: (res) => {
				state.token = res.data
			}
		})
	}
	// 获取验证码
	const getYzm = ()=>{
		let tost = utoast;
		let timer;
		if(state.yzTitle == '获取验证码'){
			let re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
			let result = re.test(state.phone);
			if(!result){
				tost.value.show({
					type: 'error',
					icon: false,
					title: '失败主题',
					message: "手机号格式错误",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
				})
			}else{
				state.yzTitle = 120;
				timer = setInterval(()=>{
					state.yzTitle = state.yzTitle - 1;
					if(state.yzTitle < 0){
						state.yzTitle = '获取验证码';
						clearInterval(timer);
					}
				},1000)
				uni.request({
					url:'http://124.221.162.230:8888/account/sendCode',
					method:'POST',
					header:{
						Authorization:state.token
					},
					data:{
						tel:state.phone
					},
					success: (res) => {
						state.yzm = res.data.data;
					}
				})
			}
		}
	}
	// 修改密码
	const changePassword = () =>{
		if(state.way == true){
			oldNew()
		}else{
			phoneChange()
		}
	}
	// 通过新旧密码修改接口
	const oldNew = ()=>{
		let tost = utoast;
		if(state.newPassword == state.reNewPassword){
			uni.request({
				url:'http://124.221.162.230:8888/account/updatePassword',
				method:'POST',
				header:{
					'Authorization':state.token
				},
				data:{
					oldPassword: state.oldPassword,
					newPassword: state.newPassword
				},
				success: (res) => {
					if(res.data.msg == '原密码错误'){
						tost.value.show({
							type: 'error',
							icon: false,
							title: '失败主题',
							message: res.data.msg,
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
					}else{
						uni.removeStorage({
							key:'Authorization',
							success: () => {
								uni.setStorage({
									key:'Authorization',
									data:res.data.data,
									success: () => {
										tost.value.show({
											type: 'success',
											title: '成功主题',
											message: "密码修改成功",
											iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
										})
										setTimeout(()=>{
											uni.navigateBack({
												delta:1
											})
										},100)
									}
								})
							}
						})
					}
				}
			})
		}else{
			tost.value.show({
				type: 'error',
				icon: false,
				title: '失败主题',
				message: '两次输入新密码不一致！',
				iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
			})
		}
	}
	// 通过手机号验证码
	const phoneChange = ()=>{
		let tost = utoast;
		if(state.yzm != state.myYzm){
			tost.value.show({
				type: 'error',
				icon: false,
				title: '失败主题',
				message: "验证码错误",
				iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
			})
		}else{
			if(state.yzm != ''){
					uni.request({
						url:'http://124.221.162.230:8888/account/updatePasswordBySms',
						method:'POST',
						header:{
							'Authorization':state.token
						},
						data:{
							newPassword:state.phonePassword
						},
						success: (res) => {
							if(res.data.code == 200){
								uni.removeStorage({
									key:'Authorization',
									success: () => {
										uni.setStorage({
											key:'Authorization',
											data:res.data.data,
											success: () => {
												tost.value.show({
													type: 'success',
													title: '成功主题',
													message: "密码修改成功",
													iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
												})
												setTimeout(()=>{
													uni.navigateBack({
														delta:1
													})
												},100)
											}
										})
									}
								})
							}
						}
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	.outbox {
		width: 100vw;
		height: 100vh;
		padding-top: var(--status-bar-height);
		padding-left: 60rpx;
		padding-right: 60rpx;
		box-sizing: border-box;

		.from {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 20%;
			box-sizing: border-box;
			.itemBox{
				width: 100%;
				height: 100rpx;
				border-radius: 14rpx;
				background-color: #f8f8f8;
				margin-bottom: 30rpx;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				input{
					width: 100%;
					height: 100%;
				}
				.yzm{
					width: 64%;
					height: 100%;
				}
			}
			.btn{
				margin-top: 30rpx;
				width: 100%;
				height: 100rpx;
				background-color: #79bbff;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
	}
</style>